<template>
	<view class="my">
		<!-- #ifdef MP-WEIXIN -->
		<view class="status_bar" :style="'height:'+tophight.top+'px;'"></view>
		<view class="status_title" :style="'height:'+tophight.height+'px;'">
			我的
		</view>
		<!-- #endif -->
		<view class="login">
			<button plain="true" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="usering">
				<view style="display: flex;align-items: center;">
					<image class="avatar" src="@/static/icon/avatar.png" mode=""></image>
					<text>请登录</text>
				</view>
			</button>
			<view class="my-view-user" v-else>
				<image class="avatar" src="@/static/icon/avatar.png" mode=""></image>
				<text>{{userdata.nickName}}</text>
			</view>
		</view>
		
		<view class="card-view">
			<view>
				<image class="card-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/206ec0fe-fb3b-41b1-ae8d-be691d2b3280.png" mode="" style="display: block;"></image>
			</view>
			<view class="card-t">
				<view class="card-t-l">
					<image class="vip-icon" src="@/static/icon/member.png"></image>
					<text v-if="userdata.boughtVip === 1">{{userdata.vipInfo.endDate}}到期</text>
					<text v-else>开通会员享权益</text>
				</view>
				<view class="card-t-r" @click="onOpenMember">
					<text>立即开通</text>
					<image class="right-iocn" src="@/static/icon/arrow-right.png"></image>
				</view>
			</view>
			<view class="card-b">
				<view class="list">
					<view class="item">
						<image class="image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/40e90ced-8693-4429-8688-672daf7dc2ad.png"></image>
						<text>完整体质</text>
					</view>
					<view class="item">
						<image class="image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/946b9577-7d32-4400-ab85-be6d6e6a3184.png"></image>
						<text>舌诊检测</text>
					</view>
					<view class="item">
						<image class="image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/408b7521-1df0-4e22-ac71-be6ebf26bf60.png"></image>
						<text>中医调理</text>
					</view>
				</view>
			</view>
		</view>
		<view class="cell-view">
			<!-- <view class="u-cell-group">
				<view class="u-cell-item">
					<view class="u-cell-l">
						<image class="u-cell-l-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/672e3b61-a751-48af-9376-b41aa45044b4.png"></image>
					</view>
					<view class="u-cell-r">
						<text>分享软件</text>
						<image class="u-cell-r-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/18534898-bc87-4e9b-96fd-2321815f592f.png"></image>
					</view>
				</view>
				<view class="u-cell-item">
					<view class="u-cell-l">
						<image class="u-cell-l-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/4d74f4d2-c682-4a03-aacc-3792ef27d00a.png"></image>
					</view>
					<view class="u-cell-r">
						<text>意见反馈</text>
						<image class="u-cell-r-icon" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/18534898-bc87-4e9b-96fd-2321815f592f.png"></image>
					</view>
				</view>
			</view> -->
			
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//引入请求文件
	import {publicing,listing} from '../../api/api.js'
	import {login,userInfo} from '../../api/request.js'
	export default {
		data(){
			return{
				tophight:{},
				userdata:{},
				usering:true
			}
		},
		onShow() {
			this.ifUser()
			this.getInfo()
		},
		created() {
			// #ifdef MP-WEIXIN
			this.tophight = uni.getMenuButtonBoundingClientRect()
			// #endif
		},
		methods:{
			ifUser(){
				let user = uni.getStorageSync('user')
				if(!user){
					this.usering=true
				}else{
					this.usering=false
					this.userdata=JSON.parse(user)
				}
			},
			getPhoneNumber(e){
				if(e.detail.errMsg == 'getPhoneNumber:fail user deny' || e.detail.errMsg === 'getPhoneNumber:fail:user deny'){
					uni.showToast({
						title: "您已拒绝！授权失败",
						icon: "none"
					})
				}else{
					publicing(login,{
						code:e.detail.code,
					}).then(res=>{
						if(res.data.code == 200){
							this.$store.commit('getToken',res.data?.token)
							uni.setStorageSync('token',res.data?.token)
							this.$refs.uToast.show({
								type: 'success',
								message: "登录成功"
							})
							this.getInfo()
						}else{
							uni.showToast({
								title: res.data?.msg,
								icon: 'error',
								duration: 2000
							});
						}
					})
				}
			},
			//获取用户信息
			getInfo(){
				listing(userInfo)
				.then(res=>{
					if(res.data.code === 200){
						this.$store.commit('getUserInfo',res.data?.data)
						this.userdata = res.data?.data
						this.usering=false
					}
				})
			},
			//开通会员
			onOpenMember(){
				let token = uni.getStorageSync('token')
				if(!token){
					this.$refs.uToast.show({
						type: 'error',
						message: "请先登录"
					})
				}else{
					uni.navigateTo({
						url:"../../packagesLogin/member/member"
					})
				}
			}
			// onLogin(){
			// 	uni.navigateTo({
			// 		url:"../../packagesLogin/login/login"
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.my{
		background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7ea9b3bd-9c97-44a8-91f4-9dca1bb92866.png');
		background-size: cover;
		// background-position: center;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		.status_title{
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			font-size: 36rpx;
			font-weight: bold;
		}
		.login{
			margin: 52rpx 20rpx 20rpx;
			.my-view-user{
				display: flex;
				align-items: center;
			}
			button{
				display: inline-block;
				border: 0;
				padding-left: 0;
				padding-right: 0;
			}
			.avatar{
				width: 144rpx;
				height: 144rpx;
			}
			text{
				font-size: 40rpx;
				font-weight: bold;
				color: #140F08;
				margin-left: 16rpx;
			}
		}
		.card-view{
			position: relative;
			margin: 40rpx 20rpx 0;
			box-sizing: border-box;
			.card-bg{
				width: 100%;
				height: 228rpx;
			}
			.card-t{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 96rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 36rpx;
				.card-t-l{
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;
					color: #222426E6;
					.vip-icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}
				.card-t-r{
					display: flex;
					align-items: center;
					background: #AD4B3C;
					color: #fff;
					padding: 10rpx 16rpx;
					border-radius: 36rpx;
					.right-iocn{
						width: 40rpx;
						height: 40rpx;
						margin-left: 6rpx;
					}
				}
			}
			.card-b{
				position: absolute;
				top: 140rpx;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 0 36rpx;
				.list{
					height: 100%;
					display: flex;
					justify-content: space-between;
					.item{
						display: flex;
						align-items: center;
						color: #FFF5F0;
						font-size: 24rpx;
						.image{
							width: 34rpx;
							height: 34rpx;
							padding-right: 6rpx;
						}
					}
				}
			}
		}
		.cell-view{
			margin: 40rpx 20rpx 0;
			.u-cell-group{
				.u-cell-item{
					display: flex;
					align-items: center;
					height: 112rpx;
					font-size: 32rpx;
					color: #22262A;
					box-sizing: border-box;
					.u-cell-l{
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						padding-left: 32rpx;
						&-icon{
							width: 48rpx;
							height: 48rpx;
						}
					}
					.u-cell-r{
						flex: 1;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1rpx solid #ecedee;
						padding-right: 32rpx;
						&-icon{
							width: 16rpx;
							height: 26rpx;
						}
					}
				}
			}
		}
	}
</style>